<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎观看</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Arial', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh; color: white;
            display: flex; flex-direction: column;
            align-items: center; padding: 20px;
        }
        
        .header {
            text-align: center; margin-bottom: 30px; padding: 20px;
            background: rgba(255, 255, 255, 0.1); border-radius: 15px;
            backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            width: 90%; max-width: 800px;
        }
        
        .welcome-text {
            font-size: 2.5rem; font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); margin-bottom: 10px;
            background: linear-gradient(45deg, #ffd89b, #19547b);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        
        .gallery-container {
            width: 90%; max-width: 800px; height: 500px; position: relative;
            margin-bottom: 30px; border-radius: 15px; overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .slideshow { width: 100%; height: 100%; position: relative; }
        
        .slide {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            opacity: 0; transition: opacity 1s ease-in-out;
            display: flex; align-items: center; justify-content: center;
            background: rgba(0, 0, 0, 0.5);
        }
        
        .slide.active { opacity: 1; }
        
        .slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
        
        .counter {
            text-align: center; padding: 15px 30px;
            background: rgba(255, 255, 255, 0.1); border-radius: 50px;
            backdrop-filter: blur(10px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            font-size: 1.2rem; margin-top: 20px;
        }
        
        .counter-number {
            font-weight: bold; font-size: 1.5rem; color: #ffd89b;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1 class="welcome-text">欢迎观看</h1>
        <p>精彩图片展示</p>
    </div>
    
    <div class="gallery-container">
        <div class="slideshow" id="slideshow"></div>
    </div>
    
    <div class="counter">
        总浏览量: <span class="counter-number" id="viewCount">10000</span>
    </div>

    <script>
        // 这里是您的图片列表 - 稍后需要替换为实际图片网址
        const imageUrls = [
            "图片1网址",
            "图片2网址", 
            "图片3网址"
        ];
        
        // 浏览量统计
        function updateViewCount() {
            let count = localStorage.getItem('viewCount');
            if (!count) {
                count = 10000; // 初始值
            } else {
                count = parseInt(count) + 1;
            }
            localStorage.setItem('viewCount', count);
            document.getElementById('viewCount').textContent = count;
        }
        
        // 初始化轮播
        function initSlideshow() {
            const slideshow = document.getElementById('slideshow');
            
            imageUrls.forEach((url, index) => {
                const slide = document.createElement('div');
                slide.className = 'slide';
                if (index === 0) slide.classList.add('active');
                
                const img = document.createElement('img');
                img.src = url;
                img.alt = `图片 ${index + 1}`;
                img.onerror = function() {
                    console.error(`图片加载失败: ${url}`);
                };
                
                slide.appendChild(img);
                slideshow.appendChild(slide);
            });
            
            startAutoSlide();
        }
        
        let currentSlide = 0;
        let slideInterval;
        
        function goToSlide(n) {
            const slides = document.querySelectorAll('.slide');
            slides[currentSlide].classList.remove('active');
            currentSlide = n;
            slides[currentSlide].classList.add('active');
        }
        
        function nextSlide() {
            goToSlide((currentSlide + 1) % imageUrls.length);
        }
        
        function startAutoSlide() {
            slideInterval = setInterval(nextSlide, 3000);
        }
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateViewCount();
            if (imageUrls.length > 0) {
                initSlideshow();
            } else {
                document.getElementById('slideshow').innerHTML = '<p>暂无图片</p>';
            }
        });
    </script>
</body>
</html>